<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>延迟加载</title>
    <style>
        .box{
            height: 1000px;
        }
        img{
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <img src="images/pan.jpg" data-img="images/banner1.jpg" alt="" class="load-img banner-img">
    <img src="images/pan.jpg" data-img="images/banner2.jpg" alt="" class="load-img banner-img">
    <img src="images/pan.jpg" data-img="images/banner3.jpg" alt="" class="load-img banner-img">
    <img src="images/pan.jpg" data-img="images/banner4.jpg" alt="" class="load-img banner-img">
    <img src="images/pan.jpg" data-img="images/banner5.jpg" alt="" class="load-img banner-img">
    <script>
        var loadClass='.load-img'
        var imgArr=Array.prototype.slice.call(document.querySelectorAll(loadClass))
        var item=null;
        load()
        window.onscroll=function(ev){
            clearTimeout(item)
            item=setTimeout(function(){
                load()
            },500)
        }
        function load(){
            for(var i=0;i<imgArr.length;i++){
                if(isture(imgArr[i])){
                    imgArr[i].src=imgArr[i].getAttribute('data-img');
                    imgArr.splice(i,1);
                    i--;

                }
            }
        }
        function isture(ev){
            var distance=ev.getBoundingClientRect();
            if(distance.bottom>0&&distance.top<window.innerHeight&&distance.right>0&&distance.left<window.innerWidth) return true
            else
            return false
        }
    </script>
</body>
</html>